<!-- @Author: Yu_Bo -->
<template>
	<view class="service">
		<view class="service_tab">
			<u-tabs :list="navList" :is-scroll="false" :current="current" @change="change"></u-tabs>
		</view>
		<!--  -->
		<view class="service_main">
			<view class="main_txt" v-for="(item,index) in list" :key="index">
				<view class="title" @click="indexBtn(index)">
					{{item.title}}
					<image v-if="listIndex==index" src="@/static/images/img/icon_top.png" mode=""></image>
					<image v-else src="@/static/images/img/icon_bot.png" mode=""></image>
				</view>
				<view class="text" v-if="listIndex==index">
					<text>{{item.content}}</text>
				</view>
			</view>
		</view>
		<!--  -->
		<view class="service_footer">
			<view class="text">
				<view class="left">
					若以上信息未能帮助到您，您也可以
				</view>
				<view class="btn page_button" @click="serviceBtn">
					联系客服
				</view>
			</view>
			<view class="text">
				<view class="left">
					若客服两个工作日内未能解决您的问题
				</view>
				<view class="btn_color" @click="serviceBtn">
					点击投诉
				</view>
			</view>
		</view>
		<!--  -->
		<c-promptone ref="promptone" text="客服微信号已复制到粘贴板\n请在微信中搜索添加"></c-promptone>
	</view>
</template>

<script>
	import { mapState } from "vuex"
	export default {
		components: {},
		data() {
			return{
				navList: [
					{name: '买书'},
					{name: '卖书'},
				],
				current: 0,
				list: [],
				listIndex: 0,
			}
		},
		computed: {
			...mapState({
				sellinginfo: (state) => state.sellinginfo
			}),
		},
		onLoad() {
			this.getList()
		},
		onShow() {},
		methods: {
			// 获取列表
			getList() {
				var that = this
				var params = {
					kind: that.current
				}
				that.$httpApi.mycustomer(params).then((res) => {
					if (res.code == 1) {
						that.list = res.data
					}
				})
			},
			// 切换
			change(index) {
				this.current = index
				this.getList()
			},
			// 展示
			indexBtn(index) {
				this.listIndex = index
			},
			// 复制微信
			serviceBtn() {
				var that = this
				uni.setClipboardData({
					data: that.sellinginfo.wx_customer,
					success: function () {
						uni.hideToast()
						console.log('success');
						that.$refs.promptone.openBtn()
					}
				});
			},
		},
	}
</script>

<style lang='scss' scoped>
	.service_tab {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1;
		width: 100%;
		height: 100rpx;
		background: #ffffff;
		border-bottom: 2rpx solid rgba(34, 34, 34, 0.05);
	}
	
	.service_main {
		width: 100%;
		padding: 100rpx 30rpx 230rpx;
		
		.main_txt {
			width: 100%;
			padding: 30rpx 0;
			border-bottom: 2rpx solid rgba(34, 34, 34, 0.05);
		
			.title {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				
				image {
					display: block;
					width: 30rpx;
					height: 30rpx;
				}
			}
			
			.text {
				width: 100%;
				padding: 30rpx;
				margin-top: 20rpx;
				background: #F6F6F6;
				border-radius: 20rpx;
			}
		}
	}
	
	.service_footer {
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 1;
		width: 100%;
		height: 230rpx;
		padding: 20rpx 30rpx;
		background: #F6F6F6;
		border-radius: 40rpx 40rpx 0rpx 0rpx;
		
		.text {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			
			.left {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #3D444D;
			}
			
			.btn {
				width: 180rpx;
				height: 72rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #FFFFFF;
				border-radius: 36rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			
			.btn_color {
				width: 180rpx;
				height: 72rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #5A68FF;
				background: #E9EBFF;
				border-radius: 36rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
		
		.text:last-child {
			margin-top: 25rpx;
		}
	}
</style>